<template>
  <div class="sub-box-border body">
    <div class="left-align sub-title">作业提交信息</div>
    <el-divider></el-divider>
    <div class="box1">
      <div style="width: 400px;">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-input size="mini" v-model="table.queryText" placeholder="名称/备注"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button size="mini" type="warning" @click="handleQuery">查询</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div>
      <el-table
        v-loading="loading"
        :data="homeworkTable"
        style="width: 100%">
        <el-table-column
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
        label="作业集名称"
        prop="collectionName"
        width="180">
        </el-table-column>
        <el-table-column
          label="日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.homeworkSubmitTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="180">
          <template slot-scope="scope">
            {{ translateState(scope.row.homeworkState) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              v-loading="delLoading"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="table.currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="table.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Homework",
        data(){
          return {
            loading: false,
            delLoading: false,
            table:{
              queryText: '',
              currentPage: 1,
              pageSize: 5,
              total: 0
            },
            homeworkTable:[
              {
                collectionName: 'Embedded',  //作业集名称
                homeworkSubmitTime: '2016-05-02',
                homeworkState: 1
              },
              {
                collectionName: 'Embedded',  //作业集名称
                homeworkSubmitTime: '2016-05-02',
                homeworkState: 1
              },
              {
                collectionName: 'Embedded',  //作业集名称
                homeworkSubmitTime: '2016-05-02',
                homeworkState: 1
              }
            ],
            user:{
              userId: ''
            }
          }
        },
        methods:{
          handleEdit(index, row) {
            this.$router.push({
              name: "userHomeworkInformation",
              params:{
                collectionId: row.collectionId,
                homeworkId: row.homeworkId
              }
            })
          },
          handleDelete(index, row) {
            let that = this;
            let data = this.$data;
            let qs = require('qs');
            data.delLoading = true;
            this.axios.post('/homework/delhomework',qs.stringify(row))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                that.$message(resData.data)
              }else{
                that.$message({
                  message: resData.errMsg,
                  type: 'warning'
                })
              }
              data.delLoading = false;
              this.getTable();
            })
          },
          translateState:function(state){
            let res = "null";
            switch(state){
              case 0:res = "已提交";break;
              case 1:res = "已通过";break;
              case 2:res = "已打回";break;
            }
            return res;
          },
          //分页
          handleQuery: function () {
            this.getTable();
          },
          handleSizeChange: function (size) {
            let data=this.$data;
            data.table.pageSize = size;
            this.getTable();
          },
          handleCurrentChange: function (currentPage) {
            let data=this.$data;
            data.table.currentPage = currentPage;
            this.getTable();
          },
          getTable(){
            //获得所有的列表信息
            let that = this;
            let data=this.$data;
            let qs = require("qs");
            data.user.userId = that.$store.state.user.userId;
            this.axios.post('/homework/showtablebyuserid',qs.stringify({
              'userId': data.user.userId,
              'queryText': data.table.queryText,
              'pageSize': data.table.pageSize,
              'currentPage': data.table.currentPage
            }))
              .then(response => {
                let resData = response.data;
                if(resData.errCode==200){
                  data.homeworkTable = resData.data.listTable;
                  data.table.total = resData.data.total;
                }else{
                  that.$message({
                    type: "error",
                    message: resData.errMsg
                  })
                }
                data.loading = false;
              });
          }
        },
        created:function(){
          let data = this.$data;
          data.userId = this.$store.state.user.userId;
          this.getTable();
        }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 800px;
    padding: 10px;
    box-sizing: border-box;
  }

  .box1{
    width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
